<template>
  <div class="table-page m-0 py-0 px-20">
    <a-space class="mb-m px-4">
      <a-input v-model="listParams.keyword" placeholder="输入名称检索" @press-enter="getTableData"></a-input>
      <a-space>
        <a-button type="primary" size="small" @click="getTableData">
          <template #icon>
            <icon-search />
          </template>
          <template #default>查询</template>
        </a-button>
        <a-button size="small" @click="onResetSearch">
          <template #icon>
            <icon-sync />
          </template>
          <template #default>重置</template>
        </a-button>
      </a-space>
    </a-space>
    <div class="w-full box-border flex-1 overflow-hidden">
      <a-scrollbar style="height: 100%; overflow-y: auto; padding: 10px 50px 20px 10px">
        <a-radio-group v-model="checkedValue" @change="onChange" class="pb-3n box-border">
          <a-grid :cols="{ sm: 1, md: 2, lg: 3, xl: 4, xxl: 5 }" :colGap="18" :rowGap="18">
            <a-grid-item v-for="(item, index) in tableData" :key="item.goodsLibraryId" @click="onClose(item.id)">
              <a-radio :value="item.id">
                <template #radio="{ checked }">
                  <a-card
                    class="box-full box-border round-10 mb-10"
                    :class="`card${(index % 10) + 1}`"
                    hoverable
                    :body-style="{ padding: '26px 60px 16px' }"
                  >
                    <span
                      class="m-absolute t-10 l-10 text-size-18"
                      style="color: rgba(255, 255, 255, 0.3); font-style: italic"
                      >{{ index + 1 }}</span
                    >
                    <div class="font-bold text-size-16 textfff flex-center w-full">{{ item.name }}</div>
                    <div
                      class="w-24n h-22 flex-center round-12 ml-auto mr-auto mt-10"
                      :style="{
                        backgroundColor: checked ? 'rgba(255, 255, 255, 1)' : 'rgba(255, 255, 255, 0.15)',
                        color: checked ? 'rgba(0, 0, 0, 1)' : 'rgba(255, 255, 255, 1)'
                      }"
                    >
                      <span v-if="checked">✔</span>
                      选择
                    </div>
                  </a-card>
                </template>
              </a-radio>
            </a-grid-item>
          </a-grid>
        </a-radio-group>
      </a-scrollbar>
    </div>
  </div>
</template>

<script setup>
import { linkAppList, linkSelect } from '@/apis'

defineOptions({ name: 'msPopupApp' })

const props = defineProps(['tabCurrentInfo', 'displayInfo'])
const emit = defineEmits(['handleCheck'])
const loading = ref(false)
const listParams = {
  keyword: undefined,
  typeId: undefined,
  id: undefined
}
const tableData = ref([])
const checkedValue = ref()

const getTableData = async () => {
  loading.value = true
  const res = await linkAppList(listParams)
  tableData.value = res.data
  loading.value = false
}
// 点击重置
const onResetSearch = () => {
  listParams.keyword = undefined
  getTableData()
}
watch(
  () => props.displayInfo,
  (newValue) => {
    if (newValue.typeId == 1 || newValue.typeId == 20 || newValue.typeId == 21) {
      checkedValue.value = newValue.id || undefined
    } else {
      checkedValue.value = undefined
    }
    listParams.typeId = newValue.currentId
    listParams.id = newValue.id || undefined
    getTableData()
  },
  { deep: true, immediate: true }
)
//
const onClose = (id) => {
  if (checkedValue.value == id) {
    emit('handleCheck')
  }
}
// 点击选择
const onChange = async (e) => {
  const index = tableData.value.findIndex((item) => {
    return e === item.id
  })
  const res = await linkSelect({
    rule: tableData.value[index].rule,
    isLogin: tableData.value[index]?.isLogin ?? undefined,
    param: {
      title: tableData.value[index].name,
      popupTypeId: listParams.typeId
    }
  })
  emit('handleCheck', res.data ?? '')
}
</script>
<style scoped lang="scss">
.arco-scrollbar {
  height: 100%;
  :deep(.arco-radio) {
    width: 100%;
    height: 120px;
  }
}
</style>
